<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../static/css/font.css">
<link rel="stylesheet" href="../static/css/weadmin.css">
<script type="text/javascript" src="${ctx}/static/zTree_v3/js/jquery-1.4.4.min.js"></script>
</head>
<body>
	<div class="weadmin-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">角色管理</a>
			<a> <cite>角色列表</cite></a>
		</span> <a class="layui-btn layui-btn-sm"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="layui-icon" style="line-height: 30px">&#x1002;</i></a>
	</div>

	
	<div class="weadmin-body">
		<table id="rolePageList" lay-filter="rolePagetest"></table>
		
		<script type="text/html" id="addRole">
  			<div class="layui-btn-container">
    			<button class="layui-btn layui-btn-sm" lay-event="addRole">添加</button>
  			</div>
		</script>
		
		<script type="text/html" id="rolePageBar">
			<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"><i class="layui-icon"></i></a>
    		<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="del"><i class="layui-icon"></i></a>
		</script>
		
	</div>
	<script type="text/javascript" src="${ctx}/static/layui/layui.js"
		charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/static/js/dateFormat.js"
		charset="utf-8"></script>
		
		<script type="text/javascript">
		layui.use('table', function(){
		  var table = layui.table;
		  
		  //第一个实例
		  table.render({
		    elem: '#rolePageList',
		    height: 'full-200',
		    loading:true,
		    url: 'role/list', //数据接口
		    page: true, //开启分页
		    toolbar: '#addRole', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
		    defaultToolbar: ['filter', 'print', 'exports'],
		    cols: [[ //表头
		      {field: 'id', title: 'ID',sort: true, fixed: 'left'},
		      {field: 'roleDesc', title: '角色', fixed: 'left'},
		      {field: 'roleName', title: '名称', fixed: 'left'},
		      {field: 'createTime', title: '创建时间', sort: true,
		    	  templet: function(d){
		    	    return createTime(d.createTime); 
		    	 }, fixed: 'left'
		      },
		      {fixed: 'right', title:'操作', toolbar: '#rolePageBar', fixed: 'left'}
		    ]]
		  });
		  
		//监听行工具事件
		  table.on('tool(rolePagetest)', function(obj){
		    var data = obj.data;
		    console.log(data);
		    //console.log(obj)
		    if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	//执行请求
		    	$.post("role/delete?id="+data.id, function (data) {
                if(data){
                	table.reload("rolePageList", "");
    		        layer.close(index);
                }
            });
		        
		      });
		    } else if(obj.event === 'edit'){
		    	layer.open({
					  type: 2, //类型，解析url
					  closeBtn: 1, //关闭按钮是否显示 1显示0不显示
					  title: '修改角色信息', //页面标题
					  shadeClose: true, //点击遮罩区域是否关闭页面
					  shade: 0.8,  //遮罩透明度
					  maxmin: true,
					  area: ['900px', '500px'],  //弹出层页面比例
					  content: 'role/addRolePage?id='+data.id  //弹出层的url
				});
		    }
		  });
		
		  //头工具栏事件
		  table.on('toolbar(rolePagetest)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'addRole':
		    	  layer.open({
						  type: 2, //类型，解析url
						  closeBtn: 1, //关闭按钮是否显示 1显示0不显示
						  title: '添加角色', //页面标题
						  shadeClose: true, //点击遮罩区域是否关闭页面
						  shade: 0.8,  //遮罩透明度
						  maxmin: true,
						  area: ['900px', '500px'],  //弹出层页面比例
						  content: 'role/addRolePage'  //弹出层的url
					});
		      break;
		    };
		  });
		
		});
	</script>
</html>